<template>
  <div id="app">

    <div class="xzk">
      <!-- 选择学校 -->
      <xsxz :options='options' mq="学校" class="" @ztsj="xgsj" />

      <!-- 选择显示全部还是只显示未处理 -->
      <xsxz :options='qow' mq="显示内容" class="" />

      <!-- 新增按钮 -->
      <div class="xzan" @click="dakaitankuang()">
        <AnNiu nr="新增"></AnNiu>
      </div>

    </div>



    <div class=" xxwthxq  ">
      <!-- 显示问题和需求的表 -->
      <bg :tableData="tableData" @save="updateByPkid" />
    </div>



    <!-- 新增弹框 -->
    <el-dialog :visible.sync="xz" title="新增"><!-- visible.sync ：是否显示 --><!-- title ：标题 -->

      <span>
        <el-form :model="xwthxq"> <!-- ref：取数据 -->
          <el-form-item label="问题描述" label-width="100px">
            <el-input v-model="xwthxq.wtms" class="wtms"></el-input>
          </el-form-item>
          <el-form-item label="模块" label-width="100px">
            <el-input v-model="xwthxq.mk" class="mk"></el-input>
          </el-form-item>
          <el-form-item label="学校" label-width="100px">
            <el-input v-model="xwthxq.xx" class="mk" :disabled="true"></el-input>
          </el-form-item>
          <!-- 可以添加更多的输入项 -->
        </el-form>
      </span>


      <span slot="footer" class="dialog-footer">
        <el-button @click="xz = false">取消</el-button>
        <el-button type="primary" @click="tjxnr()">确定</el-button>
      </span>
    </el-dialog>







    <!-- 路由匹配到的组件将渲染在这里 -->
    <router-view class="lyzj"></router-view>
  </div>


</template>

<script>
  import HelloWorld from './components/HelloWorld.vue'
  import xsxz from './components/xsxz.vue'
  import bg from './components/bg.vue'
  import AnNiu from './components/AnNiu.vue'

  import axios from 'axios'


  export default {

    data() {
      return {
        xz: false,    // 添加按钮是否显示
        qow: [
          {
            value: 'qb',
            label: '显示全部'
          },
          {
            value: 'wcl',
            label: '未处理'
          }
        ],
        options: [
          {
            value: 'qb',
            label: '全部学校'
          },
          {
            value: 'Qxt',
            label: '华师'
          },
          {
            value: 'ngs',
            label: '农工商'
          },
          {
            value: 'gzws',
            label: '广卫生'
          },
          {
            value: 'gt',
            label: '广体'
          }
        ],

        tableData: [{
          date: '2016-05-02',
          zt: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        }],
        xwthxq: {               // 新问题或需求
          wtms: '',
          mk: '',
          xx: ''
        },
        xsdxx: ''              // 显示的学校


      }
    },
    // 
    components: {
      HelloWorld, xsxz, bg, AnNiu
    },
    //在页面渲染之前执行
    created() { },
    // 在页面渲染之后执行
    mounted() {
      this.selectXXFKWTJXQZZ();
    },
    // 方法
    methods: {
      // 转换值
      zhz(cs) {
        let option = options.find(option => option.value == cs)
        this.xsdxx = option.label
      },
      // 修改数据
      xgsj(value) {
        console.log(value)
        this.xwthxq.xx = value
      },
      // 提交新内容
      tjxnr() {
        // 在这里触发你想要的方法
        console.log('提交数据');
        this.xz = false;

      },
      // 打开弹框
      dakaitankuang() {
        this.xz = true;
        this.zhz();
      },


      updateByPkid(xxfkwtjxqzz) {
        console.log("父组件接收到的数据：", xxfkwtjxqzz);
        // 在这里调用 API 或更新数据
        axios({
          url: 'http://localhost:8082/App/updateByPkid',
          method: "post",
          data: xxfkwtjxqzz,
        }).then(response => {
          let json = response.data;
          if (json.state === 200) {
            console.log('')

          } else {
            alert(json.state + " " + json.message)
          }
        }).catch(e => {
          alert(e)
        })

      },

      // 路径跳转
      tz(lj) {
        this.$router.push(lj);
      },
      // 查询学校反馈问题及需求
      selectXXFKWTJXQZZ() {
        axios({
          url: 'http://localhost:8082/App/selectXXFKWTJXQZZ',
          method: "post"
        }).then(response => {
          let json = response.data;
          if (json.state === 200) {
            this.tableData = json.data

          } else {
            alert(json.state + " " + json.message)
          }
        }).catch(e => {
          alert(e)
        })
      }
    },
  }
</script>

<style scoped>
  #app {
    height: 100%;
    width: 100%;
  }

  .wtms {
    width: 80%;
  }

  .mk {
    width: 100px;
  }


  .xzan {
    margin-top: 25px;
  }





  /* .bt1 {
    position: fixed;
        top: 200px;
        left: 100px;
  } */
  .lyzj {
    position: fixed;
    height: 100%;
    width: 100%;
    left: 200px;
  }

  .xzk {
    display: flex;
    /* 主轴方向 ：横轴*/
    flex-direction: row;
  }

  /* 外边距 */
  .wbj {
    margin: 20px;
  }

  /* 加边框 */
  .jbk {
    border: 1px solid salmon;
  }

  .xxwthxq {
    width: 1440px;
    margin-left: 30px;
    margin-top: 20px;
  }
</style>